<template>
  <div class="my">
    <div class="card" v-if="userInform">
      <div class="head-img">
        <van-image round width="5rem" height="5rem" :src="userInform.u_img" @click.capture.native="show = true" />
      </div>
      <div class="inform">
        <h3>{{ userInform.u_nickname }}</h3>
      </div>
      <van-action-sheet v-model="show" cancel-text="取消">
        <van-uploader :after-read="afterRead">
          <van-cell>更换头像</van-cell>
        </van-uploader>
      </van-action-sheet>
    </div>
    <van-cell-group style="width: 90%; margin: 0 auto; border: #e1e2e2 solid 1px; border-radius: 8px">
      <van-grid style="height: 80px; padding: 5px">
        <h3 style="margin: 0">开通会员</h3>
        <p style="font-size: 15px; margin: 0">无需等待，立即预约，高级客服，还有更多优惠等着你</p>
      </van-grid>
    </van-cell-group>
    <van-divider content-position="left" hairline>推荐服务</van-divider>
    <van-cell-group inset class="cell">
      <van-grid>
        <!-- <van-grid-item icon="todo-list-o" text="我的课程" /> -->
        <van-grid-item to="/appointment" icon="certificate" text="我的预约" />
        <!-- <van-grid-item icon="comment-o" text="我的消息" /> -->
        <!-- <van-grid-item icon="coupon-o" text="我的评论" /> -->
      </van-grid>
    </van-cell-group>
    <van-divider content-position="left" hairline>更多服务</van-divider>
    <van-cell-group inset class="cell">
      <van-grid>
        <van-grid-item icon="service-o" to="/service/online" text="在线客服" />
        <van-grid-item icon="qr" to="/service/about_my" text="关于我们" />
        <van-grid-item icon="points" to="/service/feed_back" text="意见反馈" />
        <van-grid-item icon="setting-o" to="/config" text="设置" />
      </van-grid>
    </van-cell-group>
    <!-- 首页-Tabbar导航栏 -->
    <Tabbar active="my" />
  </div>
</template>

<script>
import Tabbar from '../components/Tabbar'
import {changeAvatar, checkCollage} from '../http/api'
import qs from 'qs'
import { Notify } from 'vant'
export default {
  name: 'My',
  data() {
    return {
      userInform: null,
      show: false,
      avatar: ''
    }
  },
  mounted() {
    this.getCollage()
  },
  components: { Tabbar },
  methods: {
    afterRead(file) {
      changeAvatar(
        qs.stringify({
          avatar: file.content,
          uId: this.userInform.u_id
        })
      ).then((res) => {
        this.show = false
        this.userInform.u_img = file.content
        this.getCollage()
        Notify({ color: 'white', background: '#537081', type: 'success', message: res.msg, duration: 1000 })
      })
    },
    getCollage() {
      let data = {
        user: this.$store.state.user
      }
      checkCollage(qs.stringify(data)).then(res => {
        this.userInform = res.data[0]
      })
    }
  }
}
</script>

<style scoped>
.card {
  display: flex;
  margin: 5px;
  padding: 15px 12px;
  background-color: white;
  text-align: left;
}
.inform {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  margin-left: 7px;
}
.inform > h3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.head-img {
  display: inline-block;
}
.cell {
  margin-top: 10px;
  border: 1px solid lightgray;
}
.van-action-sheet__content {
  text-align: center;
}
</style>
